<template>
  <div class="home-container">
    <div class="home-container_left">
      <div class="home-container_top">
        <div class="home-top_c card-b">访问量</div>
        <div class="home-top_c card-b">收藏量</div>
        <div class="home-top_c card-b">反馈量</div>
      </div>
      <div class="home-container_middle">
        <div class="home-middle-left mh-10  card-b">警告信息</div>
        <div class="home-middle-right card-b">
          <div class="home-clock">
            <!--   汉字时钟   -->
            <ChineseCharacterClock></ChineseCharacterClock>
          </div>
        </div>
        <div class="home-middle-left mh-10 mr-10 card-b">错误信息</div>
      </div>
      <div class="home-container_bottom card-b">
        <div>快捷入口</div>
        <div>ssssss</div>
      </div>
    </div>
    <div class="home-container_right card-b">
      <div>日历
        <a-calendar :fullscreen="false" @panelChange="onPanelChange" @select="onSelect"/>
      </div>
    </div>
  </div>
</template>
<script>
import ChineseCharacterClock from "@/components/homeComps/ChineseCharacterClock.vue"
export default {
  data() {
    return {

    }
  },
  methods: {
    onPanelChange(value, mode) {
      console.log(value, mode);
    },
    onSelect(date) {
      console.log(date)
    },
  },
  components: {
    ChineseCharacterClock
  }
}
</script>
<style scoped lang="less">
.home-container{
  display: flex;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #f0f2f5;
  .card-b{
    display: flex;
    background: #ffffff;
    border-radius: 5px;
  }
  .home-container_left{
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .home-container_top{
      //margin-right: 10px;
      display: flex;
      .home-top_c{
        flex: 1;
        height: 100px;
        margin-right: 10px;
      }
    }
    .home-container_middle{
      flex: 1;
      display: flex;
      .home-middle-left{
        flex: 1;
        min-width: 200px;
      }
      .home-middle-right{
        margin: 10px;
        display: flex;
        justify-content: center;
        overflow: hidden;
        width:  550px;
        align-items: center;
        position: relative;
        .home-clock{
          width: 550px;
          height: 550px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          padding: 10px;
        }
      }
    }
    .home-container_bottom{
      height: 80px;
      flex-direction: column;
      margin-right: 10px;
    }
  }
  .home-container_right{
    width: 285px;
    padding: 5px;
  }
}
</style>